<template>
  <view style="opacity: 0;">
    <view class="poi-marker-box">
      <view class="poi-info">
        <view class="poi-icon" :data="JSON.stringify(data)" onclick="gotoAutonavi(event)">
          <img :src="`/industry/static/map/poi_${data.iconType}.png`" class="icon" />
        </view>
        <view class="poi-content">
          <view class="poi-distance">步行：{{ data.distance || '--' }}米</view>
          <view class="poi-time">时间：{{ (data.distance ? Math.max(1, Math.ceil(data.distance / 75)) : '--') }}分钟</view>
        </view>
      </view>
    </view>
    <view class="poi-name">{{data.name || data.matchingName}}</view>
  </view>
</template>

<script>
import { gotoAutonaive } from './../../utils/index'
export default {
  name: 'MarkerView',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {

      poi_1: '/industry/static/map/poi_1.png',
      poi_2: '/industry/static/map/poi_2.png',
      poi_3: '/industry/static/map/poi_3.png',
      poi_4: '/industry/static/map/poi_4.png',
      poi_5: '/industry/static/map/poi_5.png',
      poi_6: '/industry/static/map/poi_6.png',
      poi_7: '/industry/static/map/poi_7.png',
      poi_060101: '/industry/static/map/poi_060101.png',
      poi_090100: '/industry/static/map/poi_090100.png',
      poi_100000: '/industry/static/map/poi_100000.png',
      poi_110101: '/industry/static/map/poi_110101.png',
      poi_120000: '/industry/static/map/poi_120000.png',
      poi_141200: '/industry/static/map/poi_141200.png',
      poi_150500: '/industry/static/map/poi_150500.png',
      poi_150700: '/industry/static/map/poi_150700.png',
      poi_151000: '/industry/static/map/poi_151000.png',
      poi_160100: '/industry/static/map/poi_160100.png'

    }
  },
  mounted() {
    window.gotoAutonavi = this.gotoAutonavi
  },
  methods: {
     gotoAutonavi(event) {
      const json = event.currentTarget.getAttribute('data')
      const data = JSON.parse(json)
      // 从组件props中获取位置信息
      const name = data.matchingName || data.name || '未知位置'
      const address = data.address
      const lng = data.lng || data.longitude || 0
      const lat = data.lat || data.latitude || 0
      gotoAutonaive(lng,lat,name,address)
      //  window.location.href = `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(
      //       name
      //     )}`
    },
  }
}
</script>

<style scoped lang="scss">
  .poi-marker-box {
    color: #3D3D3D;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    position: relative;
    transform: scale(0.6);
  }
  
  .poi-info {
    display: flex;
    align-items: center;
  }
  
  .poi-icon {
    pointer-events: auto;
    margin-right: 12rpx;
    z-index: 2;
  }
  
  .icon {
    width: auto;
    height: 100rpx;
  }
  
  .poi-content {
    margin-left: -50rpx;
    // margin-top: -20rpx;
    margin-top: -12rpx;
    display: flex;
    flex-direction: column;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.28) 0%, #FFFFFF 100%);
    backdrop-filter: blur(20rpx);
    padding: 6rpx 48rpx 10rpx 40rpx;
    border-radius: 0px 16rpx 16rpx 0;
    font-size: 32rpx;
    text-align: left;
  }
  
  .poi-time {
    margin-top: 10rpx;
    line-height: 30rpx;
    padding-left: 10rpx;
  }
  .poi-distance{
    margin-top: 5rpx;
    line-height: 30rpx;
    padding-left: 10rpx;
  }
  .poi-name{
  font-size: 28rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;

  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  color: #020202;
  margin-top: -20rpx;
}
</style>